<template>
	<view class="my_container">


		<div class="my_top">
			<div class="avatar">
				<!-- 用户头像 -->
				<image class="img_avatar" :src="userInfo.avatar" mode=""></image>
				<div class="name_box">
					<span>{{userInfo.name}}</span>
					<span>{{userInfo.userName}}</span>
				</div>
			</div>
		</div>
		<!-- 功能列表 -->
		<div class="my_list">

			<div class="item" @click="toRoute(item.type)" v-for="item in myList" :key="item.type">
				<div class="text">
					<image :src="item.icon" mode=""></image>
					<span>{{item.lable}}</span>
				</div>
				<div class="arrow">
					<image src="@/static/箭头_列表向右_o.png" mode=""></image>
				</div>
			</div>
		</div>
		<up-toast ref="uToastRef"></up-toast>
		<!-- 退出登录 -->
		<div class="logout" @click="clickLogout">
			<span>退出登录</span>
		</div>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		apiQueryUser,
		logout
	} from "@/api/user.js"
	const avatarUrl = ref("")
	const uToastRef = ref(null)
	const userInfo = ref({})

	const myList = ref([{
			lable: "个人中心",
			type: 0,
			icon: "/static/个人.png"
		}, {
			lable: "我的社区",
			type: 1,
			icon: "/static/社区.png"
		},
		{
			lable: "服务记录",
			type: 2,
			icon: "/static/预约.png"
		},
		{
			lable: "我的帖子",
			type: 3,
			icon: "/static/文章.png"
		},
		// {
		// 	lable: "用药情况",
		// 	type: 4,
		// 	icon: "/static/药品.png"
		// }, 
		{
			lable: "修改密码",
			type: 5,
			icon: "/static/密码.png"
		}
	])

	const toRoute = (type) => {
		switch (type) {
			case 0:
				uni.navigateTo({
					url: "/pages/my/person/person"
				})
				break;
			case 1:
				uni.navigateTo({
					url: `/pages/my/community/community?communityId=${userInfo.value.communityId}`
				})
				break;
			case 2:
				uni.navigateTo({
					url: `/pages/my/myOrder/myOrder?userId=${userInfo.value.empId}`
				})
				break;
			case 3:
				uni.navigateTo({
					url: `/pages/my/article/article?userId=${userInfo.value.empId}`
				})
				break;
			case 5:
				uni.navigateTo({
					url: `/pages/my/editPassword/editPassword`,
					events: {
						logoutSuccessful: function() {
							clickLogout()
						}
					}
				})
				break;

			default:
				break;
		}

	}

	const clickLogout = async () => {
		// await logout();
		uni.redirectTo({
			url: "/pages/login/login"
		})
		uToastRef.value.show({
			type: 'success',
			title: '退出成功',
			message: "退出成功",
		})
		uni.removeStorage({
			key: "empleyeeInfo"
		})
		uni.removeStorage({
			key: "authorization"
		})
	}

	//获取用户信息
	const getUserInfo = async () => {
		let res = await uni.getStorage({
			key: "empleyeeInfo"
		})
		let result = await apiQueryUser(res.data.empId)
		//重新获取用户信息
		userInfo.value = result.data
		uni.setStorage({
			key: "empleyeeInfo",
			data: result?.data || null
		})

	}

	onShow(async () => {
		getUserInfo()
	})

	onMounted(async () => {
		getUserInfo()
	})
</script>



<style scoped lang="scss">
	.my_container {
		width: 100vw;
		height: 100vh;
		position: relative;
		background: #eee;

		.logout {
			width: 90vw;
			border-radius: 20rpx;
			position: absolute;
			bottom: 80rpx;
			left: 50%;
			transform: translate(-50%, 0);
			height: 80rpx;
			background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			color: #fff;
			background-color: #F5B017;
		}

		.my_top {
			box-sizing: border-box;
			padding: 0 40rpx;
			height: 180rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			background-color: #fff;

			.arrow_url {}

			.avatar {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				box-sizing: border-box;

				.img_avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-right: 40rpx;
				}


				.name_box {
					display: flex;
					flex-direction: column;

					label:nth-child(1) {
						font-size: 42rpx;
						font-weight: 800;
					}

					label:nth-child(2) {
						font-size: 28rpx;
						color: #999;
					}
				}
			}
		}

		.my_list {
			// width: 100vw;
			padding: 0 40rpx;
			box-sizing: border-box;
			// height: 500rpx;
			background-color: #fff;

			.item {
				width: 100%;
				display: flex;
				height: 100rpx;
				justify-content: space-between;
				align-items: center;
				border-bottom: 4rpx solid #f8f8f8;

				.text {
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}

				.arrow {
					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}

	}
</style>
